<template>
  <div class="home" :style="{ backgroundImage: 'url(' + bgImage + ')' }">
    <swiper :options="swiperOption" class="video_list" ref="mySwiper">
      <!-- slides -->
      <div class="swiper-slide" v-for="(item, index) in videoList" :key="index"><img :src="item.thumb" />
      </div>
    </swiper>
  </div>
</template>

<script>
import bgImage from '@/assets/home_bg.jpg'
const path = require('path');
const fs = require("fs")
export default {
  name: "home",
  data() {
    return {
      bgImage: bgImage,
      images: [],
      swiperOption: {
        slidesPerView: 3,
        autoplay: 500,
        spaceBetween: 20,
        speed: 200,
        freeMode: true,
        loop: true,
        autoplayDisableOnInteraction: false,
      },
      videoList: [],

    }
  },
  mounted() {
    this.requierVideo()
  },
  computed: {

  },
  methods: {

    requierVideo() {
      const that = this
      const configPath = this.getFullPath("/data/", "config.json")
      console.log('configPath:', configPath)
      fs.exists(configPath, function (exists) {
        if (!exists) {
          console.log("查找失败，本地文件不存在!")
          return;
        } else {
          const _file = fs.readFileSync(configPath)
          let list = JSON.parse(_file.toString()).list
          list.forEach(e => {
            e.thumb = that.getFullPath("/data/", e.thumb)
          })
          that.videoList = list
        }
      });
    },
    getFullPath(_path, _file) {
      let _s = ""
      if (_file) {
        _s = path.resolve(path.join(process.cwd(), _path, _file));
      } else {
        _s = path.resolve(path.join(process.cwd(), _path));
      }
      return _s.split('\\').join('/');
    },
    setImgUrl(img) {
      // return require(this.getFullPath('/data/', img))
      let url = this.getFullPath("/data/", img)
      // console.log(url)
      return url
      // return require("@/assets/gm_btn.png")

    }
  }
};
</script>

<style lang="less" scoped>
.home {
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  background-position: center;
  background-size: 100% 100%;
  position: relative;
  display: flex;
  justify-content: center;



  .video_list {
    height: 250px;
    width: 1500px;
    position: absolute;
    bottom: 100px;
    overflow: hidden;
    display: flex;
    align-items: center;
  }
}


.swiper-slide {
  text-align: center;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;

  img {
    width: 100%;
    height: 100%;
  }
}

.home::before {
  content: "";
  height: 100vh;
  width: 100vw;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgb(0, 0, 0) 95%);
}
</style>